<template>
  <div class="hello">
    <slot name="button" />
    <h1>{{ msg || "van-hi" }}</h1>
    <slot />
    <p>
      <slot name="btn" />
    </p>

    <!-- 测试双向绑定 -->
    <div class="test" v-if="value">双向绑定</div>
    <button @click="$emit('input', !value)">显示/隐藏</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    value: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
